<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: red;
            border-radius: 50%;
            left: 0;
            top: 0;
        }
        .box img{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
   <div class="box">
       <img src="./img/index.png" >
   </div>

    <script>
        // 拖拽写法思路：
        // 1：鼠标按下位置：距离拖拽物体左上角距离始终不变，获取鼠标距离物体的距离=  鼠标距离浏览器页面的距离 - 物体距离页面的距离 
        
        // 2：物体移动时 物体的移动距离 = 鼠标距离浏览器页面的距离 - 鼠标距离物体的距离

        // 3：鼠标抬起的时候 把鼠标的移动事件及抬起事件清空。


        // 面向对象写法：
        // 封装一个Drag对象
        function Drag(el) {
            // 属性
           this.oDiv = document.querySelector(el);
           let disX = 0;
           let disY = 0;
           this.init()
        }

        Drag.prototype = {
            constructor: Drag,
            // 初始化方法
            init(){
                this.drag()
            },
            // 实现拖拽的方法
            drag(){
                let _this = this;
                // 鼠标按下
                this.oDiv.onmousedown = function (ev) {
                    _this.mouseDown(ev)
                    // 2:鼠标移动
                    document.onmousemove = function (ev) {
                        _this.mouseMove(ev) 
                    }

                    // 3:鼠标抬起
                    document.onmouseup = function () {
                        _this.mouseUp()
                    }     
                    return false          
                }
            },
             // 鼠标按下
             mouseDown(ev){
                this.disX = ev.clientX - this.oDiv.offsetLeft;
                this.disY = ev.clientY - this.oDiv.offsetTop;
             },
              // 鼠标移动
            mouseMove(ev){
                this.oDiv.style.left = ev.clientX - this.disX + 'px';
                this.oDiv.style.top = ev.clientY - this.disY + 'px';
            },
            // 鼠标抬起
            mouseUp(){
                document.onmousemove = null;
                document.onmouseup = null; 
            }
        }


        new Drag(".box")

    </script>
</body>
</html>